<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2025/6/9
  Time: 8:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
<script src="js/qrcode.min.js"></script>
<html>
<head>
    <title>Title</title>
</head>
<style>
    html{
        height: 100%;
        font-size: 1.1rem;
    }
    body{
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: linear-gradient(-225deg, #81e7ff,white) no-repeat;
        background-size: 100% 100%;
    }
    body, #roomBuy-windows,.layout,.room-dea,.room-box,.room-choose-box,.feedback-box,.feed-result-box,.feed-text-box{
        display: flex;
        align-items: center;
    }
    *,*:after,*:before{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    #roomBuy-windows{
        display:  none;
        justify-content: center;
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 9999;
    }
    .roomBuy-win-layout{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 300px;
        height: 150px;
        background-color: white;
        /*border: 3px solid black;*/
        box-shadow: 0 0 20px #ffffff;
        padding: 1rem;
    }
    .layout{
        padding: 0;
        width: 100%;
        height: 100%;
        flex-direction: column;
        overflow-y: auto;
    }
    .room-dea{
        /*border: 1px solid black;*/
        width: 800px;
        height: 800px;
        justify-content: start;
        padding: 1.1rem 0;
        flex-direction: column;
        box-shadow: 0 0 50px #a4a4a4;
        background-color: white;
        margin-top: 5rem;
        border-radius: 20px;
    }
    .show-box{
        display: flex;
        flex-direction: row;
    }
    .room-box{
        /*border: 1px solid black;*/
        width: 400px;
        height: 400px;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        padding: 1rem;
    }
    .img-box{
        margin-top: 2rem;
        border: 1px solid black;
        width: 320px;
        height: 320px;
    }
    .btn-box{
        margin-top: auto;
        width: 100%;
        /*border: 1px solid black;*/
        display: flex;
        justify-content: center;
    }
    .btn-box>button{
        border: 3px solid #8acdff;
        border-radius: 5px;
        width: 200px;
        height: 40px;
        background-color: #8acdff;
        color: white;
        transition: 300ms;
        transform: scale(1);
        font-size: 1.1rem;
        box-shadow: 0 0 10px #f1f1f1;
    }
    .btn-box>button:hover{
        background-color: rgba(252, 252, 255, 0.6);
        color: #8acdff;
        transform: scale(0.9);
    }
    .room-box>div{
        margin-top: 2rem;
    }
    .room-choose-box{
        /*border: 1px solid black;*/
        width: 100%;
        height: 200px;
        flex-direction: column;
    }
    .room-choose-box>div{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 0 2rem 0 2rem;
        margin-top: 1rem;
    }
    .room-of-num,.room-of-pelnum{
        cursor: pointer;
        user-select: none;
        font-size: 1.2rem;
    }
    .room-choose-box>div>div{
        margin-right: 4rem;
    }
    .room-choose-box>div>div:nth-last-of-type(1){
        margin-right: 0;
        margin-left: 4rem;
    }
    .room-choose-box>div>div>input{
        width: 200px;
        height: 32px;
        padding-left: 3px;
        font-size: 1rem;
        text-align: center;
        border: 3px solid #56bdff;
    }
    .feedback-box{
        margin-top: 3rem;
        border: 1px solid #f1f1f1;
        width: 800px;
        box-shadow: 0 0 10px #a7a7a7;
        padding: 3rem;
        flex-direction: column;
        background-color: white;
    }
    .feedback-box>div{
        margin-top: 1rem;
    }
    .select-order-by-box{
        display: flex;
        align-items: center;
        justify-content: end;
        width: 100%;
        border-bottom: 1px solid black;
    }
    .select-order-by-box>a{
        text-decoration: none;
        color: black;
    }
    .feed-result-box{
        /*border: 1px solid black;*/
        width: 100%;
        padding: 1.5rem 0;
        flex-direction: column;
    }
    .feed-text-box{
        border-bottom: 1px solid #434343;
        width: 100%;
        justify-content: center;
        white-space: normal;
        margin-top: 4rem;
        flex-direction: column;
        padding-bottom: 3rem;
    }
    .feed-header{
        display: flex;
        width: 100%;
        margin-bottom: 1rem;
    }
    .roomBuy-win-layout>button{
        width: 80px;
        height: 32px;
        margin-top: auto;
        background-color: #168eff;
        border: 1px solid #0b5c9a;
        color: white;
        transition: 300ms;
        transform: scale(1);
    }
    .roomBuy-win-layout>button:hover{
        transform: scale(0.85);
    }
    #zfb-box{
        position: fixed;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        display: none;
        align-items: center;
        background-color: #606062;
    }
    #client-win-add{
        display: none;
        justify-content: center;
        align-items: center;
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(87, 87, 87,0.7);
    }
    .client-layout{
        padding: 1rem;
        display: flex;
        flex-direction: column;
        align-items: end;
        width: 500px;
        height: 300px;
        background-color: white;
    }
    .client-layout>div{
        margin-top: 1rem;
    }
    .gosum{
        width: 80px;
        height: 32px;
        background-color: #6bc5ff;
        color: white;
        border: #168eff 2px solid;
        cursor: pointer;
        transition: 200ms;
        transform: scale(1);
    }
    .gosum:hover{
        transform: scale(0.8);
    }
    .client-layout input{
        width: 200px;
        height: 24px;
    }
</style>
<body>

<div class="layout">

    <div class="room-dea">
        <div>
            <h1 id="room_name"></h1>
        </div>
        <div class="show-box">
            <div class="room-box">
                <div>
                    <span>客房类型&nbsp;&nbsp;:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="room_type"></span>
                </div>
                <div>
                    <span>客房价格&nbsp;&nbsp;:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="room_price" style="color: #ff6845"></span>
                </div>
                <div>
                    <span>最大人数&nbsp;&nbsp;:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="room_pel_num"></span>
                </div>
            </div>
            <div class="img-box">

            </div>
        </div>
        <div class="room-choose-box">
        <%--            --%>
            <div>
                <div>
                    <span>开始日期:</span>
                    <input name="startDate" type="date">
                </div>
                <div>
                    <span>间数:</span>
                    <span class="room-of-num">-</span>&nbsp;&nbsp;<input name="room_of_num" type="text" value="1">&nbsp;&nbsp;<span class="room-of-num">+</span>
                </div>
            </div>
        <%--            --%>
            <div>
                <div>
                    <span>结束日期:</span>
                    <input name="endDate" type="date">
                </div>
                <div>
                    <span>人数:</span>
                    <span class="room-of-pelnum">-</span>&nbsp;&nbsp;<input name="room_of_pelnum" type="text">&nbsp;&nbsp;<span class="room-of-pelnum">+</span>
                </div>
            </div>
        <%--            --%>
            <div>
                <span>总价格:</span>
                <span id="priceSum" style="color: #ff5847"></span>
            </div>
        </div>
        <div class="btn-box">
            <button>立即预订</button>
        </div>
    </div>

    <%-- 评论区   --%>
    <div class="feedback-box">
        <div class="select-order-by-box">
            <a style="color: #168eff;" href="javascript:;" onclick="feedBackQueryByRoomId('desc')">最新</a><span style="color: #a7a7a7">&nbsp;|&nbsp;</span><a style="color: black" href="javascript:;" onclick="feedBackQueryByRoomId('asc')">最早</a>
        </div>
        <div class="feed-result-box">

        </div>
    </div>


    <div id="roomBuy-windows">
        <div class="roomBuy-win-layout">
            <div><h3 id="orderAdd-result"></h3></div>
            <button onclick="roomWinShow()">返回</button>
        </div>
    </div>
    <div id="client-win-add">
        <div class="client-layout">
            <span id="close-client-win" style="display: block;margin-left: auto;cursor: pointer;font-size: 1.1rem">x</span>
            <div style="margin-right: 60px;">
                <span>填写您的手机号(必填):</span><input name="c-phone" type="text">
            </div>
            <div style="margin-right: 60px;">
                <span>填写您的身份证号(必填):</span><input name="c-idcard" type="password">
            </div>
            <div style="margin-right: 60px;">
                <span>填写您的真实姓名(必填):</span><input name="c-name" type="text">
            </div>
            <div style="width: 100%;display: flex;justify-content: center;margin-top: auto">
                <button class="gosum">去结算</button>
            </div>
        </div>
    </div>
    <div id="zfb-box">
        <div id="qrcode" style="margin: 0 auto;border: 10px #33cdff solid"></div>
    </div>
</div>


</body>
<script>
    var TestuserId=1;//这个是测试用的用户id
    var roomIdGet=${param.roomId};//房间id获取
    var roomPleNum=0;//房间最大人数
    var orderPriceSum=0;
    roomQueryById();//房间id查询
    startDateMinDate();//时间选择框
    priceSum();//总价格
    feedBackQueryByRoomId();//评论查询
    function roomQueryById() {
        $.ajax( {
            "url"          :  "RoomQueryByIdServlet",
            "type"         :  "get",
            "data"         :  {"roomId":roomIdGet},
            "dataType" :  "text",
            "beforeSend": function() {
            },
            "success":  function(result) {
                var roomBean=JSON.parse(result);
                $("#room_name").text(roomBean.room_name);
                $("#room_type").text(roomBean.roomType.room_type_name);
                $("#room_price").text("￥"+roomBean.room_price);
                $("#room_pel_num").text(roomBean.room_pel_num);
                $("input[name='room_of_pelnum']").val(roomBean.room_pel_num);
                roomPleNum=roomBean.room_pel_num;
            },
            "error":  function() {
                alert("网络异常")
            }
        } );
    }
    //弹窗
    let roomWinFlag=false;
    function roomWinShow(){
        $("#roomBuy-windows").css("display","none");
        // if(roomWinFlag){
        //     $("#roomBuy-windows").css("display","flex");
        //     priceSum();
        //     roomWinFlag=false;
        // }else {
        //     $("#roomBuy-windows").css("display","none");
        //     roomWinFlag=true;
        // }
    }
    //开始日期输入框和结束日期最小值设置为今日
    function startDateMinDate() {
        var date=new Date();
        var year=date.getFullYear();
        var month=(date.getMonth()+1);
        var dateGet=date.getDate();
        //初始化结束时间为当前时间，然后去底下代码块进行判断得到最终结果
        var endYear=date.getFullYear();
        var endMonth=(date.getMonth()+1);
        var endDateGet=(date.getDate());
        var endDateResult=endMonth+"-"+endDateGet;
        //获取本月月末
        // 月份加1,因为获取到的日期转成date后又月份变成了从0开始，所以加1
        // 举例子：字符串为2000-1-1,其中的1date会把他变成他所在的下标也就是0，我们get月获取的只是下标
        let lastDate=new Date(date.getFullYear(),date.getMonth()+1,0);
        let lastDateStr=endMonth+"-"+lastDate.getDate();
        console.log("月底"+lastDateStr);
        //结束日期判断
        //如果日期为12月31日则年份加1
        if(endDateResult === '12-31'){
            endYear=date.getFullYear()+1;
        }else {
            //判断是否为本月月末,如果不是天数要加1
            if(lastDateStr === endDateResult){
                endMonth=endMonth+1;//月份加1
                endDateGet=1;//日期归1
            }else {
                endDateGet=endDateGet+1;
            }
        }
        //开始日期月份和日拼接0
        if(date.getMonth()<10){
            month='0'+month;
        }
        if(date.getDate()<10){
            dateGet='0'+dateGet;
        }
        //结束日期月份和日拼接0
        if(endDateGet < 10){
            endDateGet='0'+endDateGet;
        }
        if(endMonth < 10){
            endMonth='0'+endMonth;
        }
        var startMin=year+"-"+month+"-"+dateGet;//开始日期最小值
        var endMin=endYear+"-"+endMonth+"-"+endDateGet;//结束日期最小值
        // console.log(endMin);
        $("input[name='startDate']").attr("min",startMin);
        $("input[name='startDate']").val(startMin);
        $("input[name='endDate']").attr("min",endMin);
        $("input[name='endDate']").val(endMin);
    }
    //开始日期变化时结束日期选择框发生改变
    $("input[name='startDate']").change(function () {
        let startDate=$(this).val();
        //获取今日的时间
        let theday=new Date();
        let thedayResult=theday.getFullYear()+"-"+(theday.getMonth()+1)+"-"+theday.getDate();
        //先转成date格式，然后进行数字判断，因为date会把正确的时间变成毫秒值，利用这一特性达到判断时间是否正确
        //拿到今天的时间，和框内的时间作比较，如果框内的时间小于今天的时间那么也去重新初始化
        if(isNaN(Date.parse(startDate)) || Date.parse(startDate) < Date.parse(thedayResult)){
            startDateMinDate();
        }else {
            //如果时间小于当前时间则重新初始化时间
            let date =new Date(Date.parse(startDate));//字符串转时间
            //赋值
            let endYear=date.getFullYear();
            let endMonth=(date.getMonth()+1);
            let endDateGet=date.getDate();
            let endDateResult=endMonth+"-"+endDateGet;//开始日期的结果
            console.log("data的月份"+date.getMonth());
            //获取本月月末
            // 月份加1,因为获取到的日期转成date后又月份变成了从0开始，所以加1
            // 举例子：字符串为2000-1-1,其中的1date会把他变成他所在的下标也就是0，我们get月获取的只是下标
            let lastDate=new Date(date.getFullYear(),date.getMonth()+1,0);
            let lastDateStr=endMonth+"-"+lastDate.getDate();
            console.log("月底"+lastDateStr);
            //以下为基于开始日期的结束日期的计算和逻辑判断
            //如果日期为12月31日则年份加1,如果不是年底则进行月底判断
            if(endDateResult === '12-31'){
                endYear=(date.getFullYear()+1);
                endMonth=1;//月份归1
                endDateGet=1;//日归1
            }else {
                //判断是否为本月月末,如果不是天数要加1
                if(lastDateStr === endDateResult){
                    endMonth=endMonth+1;//月份加1
                    endDateGet=1;//日期归1
                }else {
                    endDateGet=endDateGet+1;
                }
            }
            //结束日期月份和日拼接0
            if(endDateGet < 10){
                endDateGet='0'+endDateGet;
            }
            if(endMonth < 10){
                endMonth='0'+endMonth;
            }
            let endMin=endYear+"-"+endMonth+"-"+endDateGet;//结束日期最小值
            $("input[name='endDate']").attr("min",endMin);//设定选择框最小值为今天
            $("input[name='endDate']").val(endMin);//赋值
        }
    });
    //结束日期选择框发生改变时
    $("input[name='endDate']").change(function () {
        let endDate=$(this).val();
        if(isNaN(Date.parse(endDate))){
            startDateMinDate();
        }
        // //年份验证
        // let nowDate=new Date();
        // let endDateGet=new Date(Date.parse(endDate));
        // //如果框内的年份小于现在的年份
        // if(endDateGet.getFullYear() !== nowDate.getFullYear()){
        //     startDateMinDate();
        // }


        //如果小于开始日期
        let startDate=$("input[name='startDate']").val();
        if(Date.parse(endDate) <= Date.parse(startDate)){
            startDateMinDate();
        }
        priceSum();
    });
    //间数加减按钮
    $(".room-of-num").click(function () {
        let val=$(this).text();
        let roomNum=$("input[name='room_of_num']").val();
        let sum=parseInt(roomNum);
        console.log(sum);
        if(val === '+'){
            sum+=1;
        }
        if(val === "-"){
            sum-=1;
        }
        //最终验证
        if(sum === 0){
            sum=1;
        }
        $("input[name='room_of_num']").val(sum);
        priceSum();
    });
    //间数验证
    //失焦方法
    $("input[name='room_of_num']").blur(function () {
        let val=$(this).val();
        let valNum=parseInt(val);
        if(valNum === 0){
            alert("间数不可为0");
            $(this).val(1);
        }
        if(isNaN(valNum) || val==='' || val===null){
            alert("输入有误");
            $(this).val(1);
        }
    });

    //人数加减按钮
    $(".room-of-pelnum").click(function () {
        let val=$(this).text();
        let roomPel=$("input[name='room_of_pelnum']");//人数框元素
        let sum=parseInt(roomPel.val());//总人数
        // console.log(sum);
        //根据按钮的值进行加减
        if(val === '+'){
            //如果框内值等于查询到的最大人数限制
            if(sum === roomPleNum){
                roomPel.attr("readonly","readonly");
                $("input[name='room_of_pelnum']").val(roomPleNum);
            }else {
                roomPel.removeAttr("readonly");
                sum+=1;
            }
        }
        if(val === "-"){
            sum-=1;
        }
        //最终验证
        if(sum === 0){
            sum=1;
        }
        $("input[name='room_of_pelnum']").val(sum);
        priceSum();//价格计算
    });
    //失焦方法(含验证)
    $("input[name='room_of_pelnum']").blur(function () {
        let val=$(this).val();
        let valNum=parseInt(val);
        if(valNum === 0 || valNum < 0 || valNum > roomPleNum){
            alert("人数有误");
            $(this).val(1);
        }
        if(isNaN(valNum) || val==='' || val===null){
            alert("输入有误");
            $(this).val(1);
        }
    });
    //总价格计算
    function priceSum() {
        var data={};
        data.startDate=$("input[name='startDate']").val();
        data.endDate=$("input[name='endDate']").val();
        data.room_of_num=$("input[name='room_of_num']").val();
        data.roomId=roomIdGet;
        $.ajax( {
            "url"          :  "PriceSumComputeServlet",
            "type"         :  "get",
            "data"         :  data,
            "dataType" :  "text",
            "beforeSend": function() {
            },
            "success":  function(result) {
                var sumResult=JSON.parse(result);
                $("#priceSum").text("￥"+sumResult);
                orderPriceSum=sumResult;
            },
            "error":  function() {
                alert("网络异常")
            }
        } );
    }

    //订单添加
    function orderAddOne() {
        let data={};
        data.startDate=$("input[name='startDate']").val();
        data.endDate=$("input[name='endDate']").val();
        data.cphone=$("input[name='c-phone']").val();
        data.cidcard=$("input[name='c-idcard']").val();
        data.cname=$("input[name='c-name']").val();
        data.priceSum=orderPriceSum;
        data.roomId=roomIdGet;
        data.userId=TestuserId;
        $.ajax( {
            "url"          :  "OrderAddOneServlet",
            "type"         :  "post",
            "data"         :  data,
            "dataType" :  "text",
            "beforeSend": function() {
            },
            "success":  function(result) {
                var r=JSON.parse(result);
                console.log(r);
                if(r.orderResult === "success"){
                    $("#zfb-box").css("display","flex");
                    var qrcode=new QRCode("qrcode",{
                        text:  r.QrStr,
                        width: 300,
                        height: 300,
                        colorDark: "#292929",
                        colorLight: "#ffffff",
                        correctLevel: QRCode.CorrectLevel.H
                    });
                    //向后端发送支付结果查询请求
                   var timeint=setInterval(function () {
                        $.ajax( {
                            "url"          :  "ConfirmZbfCodeServlet",
                            "type"         :  "post",
                            "data"         :  {"orderNumber":r.orderNumber},
                            "dataType" :  "text",
                            "beforeSend": function() {
                            },
                            "success":  function(result) {
                                if(result === "success"){
                                    clearInterval(timeint);
                                    $("#zfb-box").css("display","none");
                                    $("#client-win-add").css("display","none");
                                    $("#roomBuy-windows").css("display","flex");
                                    $("#orderAdd-result").text("支付成功!");
                                }
                            },
                            "error":  function() {
                            }
                        } );
                    },3000);
                }else {
                    $("#roomBuy-windows").css("display","flex");
                    $("#orderAdd-result").text("订单添加失败");
                }
            },
            "error":  function() {
                alert("网络异常")
            }
        } );
    }
    
    //反馈（评论查询）
    function  feedBackQueryByRoomId(orderBy) {
        $.ajax( {
            "url"          :  "FeedBackQueryByRoomIdServlet",
            "type"         :  "get",
            "data"         :  {"roomIdGet":roomIdGet,"orderBy":orderBy},
            "dataType" :  "text",
            "beforeSend": function() {
            },
            "success":  function(result) {
                var feedbackList=JSON.parse(result);
                console.log(feedbackList);
                var temp="";
                for (var f in feedbackList){
                    temp+=`
                        <div class="feed-text-box">
                            <div class="feed-header">
                                <span style="margin-right: auto;color: #299bff">\${feedbackList[f].user.user_name}</span>
                                <span style="margin-left: auto;color: #737373;font-size: 0.8rem">\${feedbackList[f].feedback_date}</span>
                        </div>
                                <span style="margin-right:auto;white-space: normal;word-break: break-all">\${feedbackList[f].feedback_details}</span>
                        </div>
                    `
                }
                $(".feed-result-box").children().remove();
                $(".feed-result-box").append(temp);
            },
            "error":  function() {
                alert("网络异常")
            }
        } );
    }
    $(".select-order-by-box a").click(function () {
        $(".select-order-by-box a").css("color", "black");
        $(this).css("color", "#168eff");
    })
    let clientwinflag=true;
    $(".btn-box>button").click(function () {
        if(clientwinflag){
            $("#client-win-add").css("display","flex");
            clientwinflag=false;
        }else {
            $("#client-win-add").css("display","none");
            clientwinflag=true;
        }
    });
    $(".gosum").click(function () {
       let phoneStr=$("input[name='c-phone']").val();
       let idcardStr=$("input[name='c-idcard']").val();
       let cnameStr=$("input[name='c-name']").val();
       if(phoneStr === '' || idcardStr === ''|| cnameStr === ''){
           alert("请填写个人信息!")
       }else {
           orderAddOne();
       }
    })
    $("#close-client-win").click(function () {
        if(clientwinflag){
            $("#client-win-add").css("display","flex");
            clientwinflag=false;
        }else {
            $("#client-win-add").css("display","none");
            clientwinflag=true;
        }
    });
</script>
</html>
